<!--
 * @Description  : 
 * @Author       : 陈韵同
 * @Date         : 2021-03-18 16:52:43
 * @LastEditTime : 2021-03-18 17:18:27
 * @LastEditors  : 陈韵同
 * @FilePath     : e:\协同云组件库\新建文件夹 (2)\cloud-components\docs\pages\components\cloud-tree\example9.vue
-->
<template>
  <div>
    <CloudTreeEdit
      style="width: 200px"
      default-expand-all
      :treeData="treeData"
      @select="onSelect"
      @expand="onExpand"
      @btnClick="btnClick"
    >
    </CloudTreeEdit>
  </div>
</template>

<script>
export default {
  title: '9.CloudTreeEdit',
  data() {
    return {
      treeData: [{
        title: 123,
        key: 123,
        isParent: true,
        isRoot: true,
        children: [{
          title: '456456456',
          key: 456,
          children: [{
            title: '999999',
            key: 999
          }, {
            title: '99',
            key: 99
          }]
        }, {
          title: '789',
          key: 789,
          children: [{
            title: '6',
            key: 6
          }, {
            title: '66',
            key: 66
          }]
        }, {
          title: '111',
          key: 111,
          iconName: 'table',
          children: [{
            title: '2',
            key: 2
          }, {
            title: '22',
            key: 22
          }]
        }, {
          title: '222',
          key: 222,
          iconName: 'table'
        }, {
          title: '333',
          key: 333,
          iconName: 'table'
        }]
      }]
    }
  },
  methods: {
    onSelect(keys, event) {
      console.log('Trigger Select', keys, event);
    },
    onExpand() {
      console.log('Trigger Expand');
    },
    btnClick(key, node) {
      switch (key) {
        case 'edit':
          this.$message.success(key);
          break;

        case 'delete':
          this.$message.success(key);
          break;

        default:
          break;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
</style>